<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2024-11-21 15:07:30
 * @LastEditTime: 2024-11-21 16:05:03
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
	<el-dialog v-model="dialogShow" :title="`用户折扣 - ${userName}`" width="800" :before-close="cancel">
		<div class="flex justify-end mb-20px">
			<el-button type="primary" @click="insert">新增</el-button>
		</div>
		<e-table
			:data="tableData"
			:columns="columns.subTable"
			:height="300"
		>
			<template #product="{ scope }">
				<el-select v-model="scope.row.productCode" placeholder="请选择产品" @change="productChange(scope.row, $event)">
					<el-option v-for="(o) in products" :label="o.label" :value="o.productCode"></el-option>
				</el-select>
			</template>
			<template #discount="{ scope }">
				<el-input v-model="scope.row.discount" placeholder="请填写折扣"></el-input>
			</template>
			<template #handleSlot="{ scope }">
				<el-button
				type="danger"
				link
				size="small"
				@click="remove(scope.$index)"
				>删除</el-button>
			</template>
		</e-table>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="submit">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- <UserConfigModal ref="userConfigModal" /> -->
</template>
<script setup>

import { ElMessage } from 'element-plus'
import eTable from '@/components/e-table'
import columns from './columns'
import UserConfigModal from './UserConfigModal.vue'
import { productList, modifyUserProduct } from '@/api/insurance';

const emits = defineEmits(['success']);

const dialogShow = ref(false);

const tableData = ref([]);
const userName = ref('');
const record = ref(null);

const products = ref([]);
const loadData = async () => { 
	const { data } = await productList()  
	products.value = data.map(o => ({
		...o,
		label: `${o.productName}（${o.productCode}）`,
	}))
};
loadData()

const show = async (data) => {
	dialogShow.value = true;
	userName.value = data.name;
	record.value = data;
	tableData.value = data.userProductList || [];
};
const closeDialog = () => {
	dialogShow.value = false;
	// dialogType.value = undefined;
};

const cancel = () => {
	closeDialog();
};

const submit = () => {
	Promise.all(tableData.value.map((o) => modifyUserProduct({
		id: o.id,
		productId: o.productId,
		productCode: o.productCode,
		productName: o.productName,
		discount: o.discount,
		userId: record.value.id,
		userName: record.value.name,
	}))).then(() => {
			ElMessage.success('提交成功');
		closeDialog();
		emits('success');
	})
};


const userConfigModal = ref(null);
const remove = (index) => {
	tableData.value.splice(index, 1);
};

const insert = () => {
	tableData.value.push({
		productCode: '',
		discount: '',
	});
};

const productChange = (row, value) => {
	const product = products.value.find(o => o.productCode === value)
	row.productName = product.productName
	row.productId = product.id
	row.productCode = product.productCode
};

defineExpose({
	show,
});
</script>
